<template>
    <div>
        <h3>公告显示</h3>
        标题
        <input type="text" v-model="can.tiTle">
        公告类型:
        <select v-model="can.TypeId">
                            <option value="">请选择</option>
                            <option :value="item.id" v-for="item in xiala.list">{{ item.typeName }}</option>
                        </select>
         <input type="button" value="查询" @click="show" class="btn btn-info">
         <input type="button" value="导出" @click="exportfn" class="btn btn-info">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>id</td>
                    <td>标题</td>
                    <td>分类</td>
                    <td>图片</td>
                    <td>状态</td>
                    <td>发布时间</td>
                    <td>操作</td>
                
                </tr>
                <tr v-for="item in query.list">
                    <td>{{item.id}}</td>
                    <td>{{item.title}}</td>
                    <td>{{item.typeName}}</td>
                    <td>
                        <img :src="item.img" alt="" width="100" height="100">
                    </td>
                    <td>{{item.state?"发布":"隐藏"}}</td>
                    <td>{{moment(item.createTime).format("YYYY-MM-DD HH:mm:ss") }}</td>
                    <td>操作</td>
                
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import {useRoute,useRouter} from 'vue-router'
import moment from 'moment';
const Route=useRoute();
const Router=useRouter();

onMounted(()=>{
    show();
    showServer();
})
const exportfn=()=>{
    location.href="https://localhost:7097/api/GongGao/ExportExcel"
}
//下拉框
const xiala:any=reactive({
    list:[]
})
const showServer=()=>{
    axios({
        method:'get',
        url:'/api/GongGao/GetGTypes'
    })
    .then(res=>{
        console.log(res);
        xiala.list=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}
const can=reactive({
    tiTle:'',
    TypeId:'',
})
const query:any=reactive({
    list:[]
})
const show=()=>{
    axios({
        method:'get',
        url:'/api/GongGao/GongGaoShow',
        params:can,
        
    })
    .then(res=>{
        console.log(res);
        query.list=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>